<template><div><h3 id="_1-传统布局与flex布局" tabindex="-1"><a class="header-anchor" href="#_1-传统布局与flex布局" aria-hidden="true">#</a> 1 传统布局与flex布局</h3>
<p><strong>传统布局</strong></p>
<ul>
<li>兼容性好</li>
<li>布局繁琐</li>
<li>局限性，移动端使用效果较差</li>
</ul>
<p><strong>flex弹性布局</strong></p>
<ul>
<li>操作方便，布局简单，移动端使用广泛</li>
<li>PC端支持较差</li>
<li>IE11或更低版本，不支持或部分支持</li>
</ul>
<p>如果是PC端页面布局，还是使用传统布局。</p>
<p>如果是移动端或者不考虑兼容性问题的PC端页面布局，还是使用flex布局。</p>
<h3 id="_2-flex布局原理" tabindex="-1"><a class="header-anchor" href="#_2-flex布局原理" aria-hidden="true">#</a> 2 flex布局原理</h3>
<p>flex即通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。</p>
<p>父盒子设置为flex布局之后，子元素的float、clear和verhical-align都将失效。</p>
<p>采用flex布局的元素，称为flex容器。它的所有子元素自动成为容器成员，称为flex项目。</p>
<h3 id="_3-父盒子属性" tabindex="-1"><a class="header-anchor" href="#_3-父盒子属性" aria-hidden="true">#</a> 3 父盒子属性</h3>
<ul>
<li>flex-direction：设置主轴的方向</li>
<li>justify-content：设置主轴上的子元素排列方式</li>
<li>flex-wrap：设置子元素是否换行</li>
<li>align-content：设置侧轴上子元素的排列方式(多行)</li>
<li>align-items：设置侧轴上的子元素排列方式(单行)</li>
<li>flex-flow：复合属性，相当于flex-direction和flex-wrap</li>
</ul>
<h4 id="_3-1-flex-direction" tabindex="-1"><a class="header-anchor" href="#_3-1-flex-direction" aria-hidden="true">#</a> 3.1 flex-direction</h4>
<p>flex-direction用于设置主轴的方向，即项目的排列方向。</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>row</td>
<td>默认值，从左到右</td>
</tr>
<tr>
<td>row-reverse</td>
<td>从右到左</td>
</tr>
<tr>
<td>column</td>
<td>从上到下</td>
</tr>
<tr>
<td>column-reverse</td>
<td>从下到上</td>
</tr>
</tbody>
</table>
<h4 id="_3-2-justify-content" tabindex="-1"><a class="header-anchor" href="#_3-2-justify-content" aria-hidden="true">#</a> 3.2 justify-content</h4>
<p>justify-content设置项目在主轴上的对齐方式。</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-start</td>
<td>默认值，主轴左对齐</td>
</tr>
<tr>
<td>flex-end</td>
<td>主轴右对齐</td>
</tr>
<tr>
<td>center</td>
<td>主轴居中对齐</td>
</tr>
<tr>
<td>space-around</td>
<td>主轴项目平分剩余空间</td>
</tr>
<tr>
<td>space-between</td>
<td>主轴两边贴边，再平分剩余空间</td>
</tr>
</tbody>
</table>
<h4 id="_3-3-flex-wrap" tabindex="-1"><a class="header-anchor" href="#_3-3-flex-wrap" aria-hidden="true">#</a> 3.3 flex-wrap</h4>
<p>flex-wrap设置子元素是否换行。默认子元素不换行，如果装不下，则会缩小子元素的宽度。</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>nowrap</td>
<td>默认值，不换行</td>
</tr>
<tr>
<td>wrap</td>
<td>换行</td>
</tr>
</tbody>
</table>
<h4 id="_3-4-align-items" tabindex="-1"><a class="header-anchor" href="#_3-4-align-items" aria-hidden="true">#</a> 3.4 align-items</h4>
<p>align-items设置侧轴上子元素对齐方式(单行)</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-start</td>
<td>侧轴左对齐</td>
</tr>
<tr>
<td>flex-end</td>
<td>侧轴右对齐</td>
</tr>
<tr>
<td>center</td>
<td>侧轴居中对齐</td>
</tr>
<tr>
<td>stretch</td>
<td>默认值，子元素高度拉伸到和父元素一致，给高度失效</td>
</tr>
</tbody>
</table>
<h4 id="_3-5-align-content" tabindex="-1"><a class="header-anchor" href="#_3-5-align-content" aria-hidden="true">#</a> 3.5 align-content</h4>
<p>align-content设置侧轴上子元素对齐方式(多行)。</p>
<table>
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>flex-start</td>
<td>默认值，侧轴左对齐</td>
</tr>
<tr>
<td>flex-end</td>
<td>侧轴右对齐</td>
</tr>
<tr>
<td>center</td>
<td>侧轴居中对齐</td>
</tr>
<tr>
<td>space-around</td>
<td>侧轴平分剩余空间</td>
</tr>
<tr>
<td>space-between</td>
<td>侧轴两边贴边，再平分剩余空间</td>
</tr>
<tr>
<td>stretch</td>
<td>设置子项高度平分父元素高度</td>
</tr>
</tbody>
</table>
<h4 id="_3-6-flex-flow" tabindex="-1"><a class="header-anchor" href="#_3-6-flex-flow" aria-hidden="true">#</a> 3.6 flex-flow</h4>
<p>flex-flow是flex-direction和flex-wrap的缩写形式。</p>
<h3 id="_4-子盒子属性" tabindex="-1"><a class="header-anchor" href="#_4-子盒子属性" aria-hidden="true">#</a> 4 子盒子属性</h3>
<ul>
<li>flex：设置子盒子占的份数</li>
<li>align-self：控制子项在侧轴的排列方式</li>
<li>order：设置子项的排列顺序</li>
</ul>
<h4 id="_4-1-flex" tabindex="-1"><a class="header-anchor" href="#_4-1-flex" aria-hidden="true">#</a> 4.1 flex</h4>
<p>flex定义子项目分配剩余空间时，占有多少份数。</p>
<h4 id="_4-2-align-self" tabindex="-1"><a class="header-anchor" href="#_4-2-align-self" aria-hidden="true">#</a> 4.2 align-self</h4>
<p>align-self允许单个项目有与其他项目不一样的对齐方式。</p>
<img src="https://s2.loli.net/2022/05/15/T5GQv4O7Zs1bKIm.png" alt="image-20220515095941091" style="zoom:50%;" />
<h4 id="_4-3-order" tabindex="-1"><a class="header-anchor" href="#_4-3-order" aria-hidden="true">#</a> 4.3 order</h4>
<p>order定义项目的排列顺序，数值越小，排列越靠前。</p>
<img src="https://s2.loli.net/2022/05/15/gsUyYzZxeiaWkVp.png" alt="image-20220515095648050" style="zoom:50%;" /></div></template>
